<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,viewport-fit=cover">
    <meta name="format-detection" content="telephone=yes" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.url %>favicon.ico">
    <title>精邻兔</title>
    <script src="lib/vue.min.js"></script>
    <script src="lib/vue-router.min.js"></script>
    <script src="lib/vuex.min.js"></script>
    <script src="lib/axios.min.js"></script>
    <script src="lib/qs.min.js"></script>
    <script type="text/javascript" src="https://apis.map.qq.com/tools/geolocation/min?key=XO4BZ-YYWLX-R4A4U-TBW3R-2GS3S-PEFD4&referer=精灵兔"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
        <div class="index-loading">
            <span class="icon">
                <svg viewBox="25 25 50 50" class="circular">
                    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                </svg>
            </span>
            <span v-if="showShare" class="text">加载中...</span>
        </div>
    </div>
    <style type="text/css">
        .index-loading{
            color:#9b9b9b;
            font-size:16px;
            line-height:20px;
            position:fixed;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            display: flex;
         	flex-direction: row;
            align-items: center;
            justify-content: center;
            align-content: center;
        }
        .index-loading span.icon{
            width:20px;
            height:20px;
            position:relative;
            margin-right:10px;
        }
        .index-loading span.icon .circular{
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            animation: index_loading_keyframes-rotate 2s linear infinite;
        }
        .index-loading span.icon .circular .path{
            stroke-dasharray: 90,150;
            stroke-dashoffset: 0;
            stroke-width: 4;
            stroke: #9b9b9b;
            stroke-linecap: round;
            opacity: 1;
            animation: index_loading_keyframes-dash 1.5s ease-in-out infinite;
        }
        .index-loading span.text{
            white-space:nowrap;
        }
        @keyframes index_loading_keyframes-rotate{
        	0%{
                transform:rotate(0deg)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        @keyframes index_loading_keyframes-dash{
        	0%{
                stroke-dasharray:1,200;
        		stroke-dashoffset:0;
            }
            50%{
                stroke-dasharray:90,150;
        		stroke-dashoffset:-40px;
            }
        	100%{
        		stroke-dasharray:90,150;
        		stroke-dashoffset:-120px;
        	}
        }
    </style>
    <!-- built files will be auto injected -->
    <script>
        !function (window) {

            /* 设计图文档宽度 */
            var docWidth = 750,
                doc = window.document,
                docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

            var recalc = (function refreshRem () {
                var clientWidth = docEl.getBoundingClientRect().width;
                /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
                //docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
                docEl.style.fontSize=Math.min(clientWidth,768)/20+'px';
                return refreshRem;
            })();

            /* 添加倍屏标识，安卓为1 */
            docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

            if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
                /* 添加IOS标识 */
                doc.documentElement.classList.add('ios');
                /* IOS8以上给html添加hairline样式，以便特殊处理 */
                if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8){
                    doc.documentElement.classList.add('hairline');
                };
            }
            if (!doc.addEventListener){
                return;
            };
            window.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }(window);
    </script>
  </body>
</html>
